/**
 * Created by fanweihua on 2016/12/5.
 */
import React from 'react';
import TaBarHtml from './tabbarHtml.js';

const TaBar = React.createClass({
    getInitialState: function () {
        return {
            html: TaBarHtml.html,
            javaScriptHtml: TaBarHtml.javaScriptHtml,
        };
    },
    render(){
        return (
            <div className="Z_slideIn">
                <div className="page slideIn">
                    <div className="Z_content_code">
                        <div dangerouslySetInnerHTML={{__html: this.state.html}}></div>
                        <div dangerouslySetInnerHTML={{__html: this.state.javaScriptHtml}}></div>
                    </div>
                </div>
                <div className="Z_content">
                    <div className="Z_panel-body-backgound">
                        <TaBarNav></TaBarNav>
                    </div>
                </div>
            </div>
        )
    }
});
module.exports = TaBar;
const TaBarNav = React.createClass({
    componentDidMount: function () {
        TaBarHtml._go();
    },
    render(){
        return (
            <div className="Z_panel-body">
                <div className="page__bd" style={{height: "100%"}}>
                    <div className="weui-tab">
                        <div className="weui-tab__panel">
                            <div className="Z_weui-tab_panel Z_active">11111</div>
                            <div className="Z_weui-tab_panel">22222</div>
                            <div className="Z_weui-tab_panel">33333</div>
                        </div>
                        <div className="weui-tabbar">
                            <a href="javascript:;" className="weui-tabbar__item weui-bar__item_on" data="1">
                                <span style={{display: "inline-block", position: "relative"}}>
                                    <img src="/bower_components/weui-master/example/images/icon_tabbar.png" alt=""
                                         className="weui-tabbar__icon"></img>
                                    <span className="weui-badge"
                                          style={{position: "absolute", top: "-2px", right: "-13px"}}>8</span>
                                </span>
                                <p className="weui-tabbar__label">微信</p>
                            </a>
                            <a href="javascript:;" className="weui-tabbar__item" data="2">
                                <img src="/bower_components/weui-master/example/images/icon_tabbar.png" alt=""
                                     className="weui-tabbar__icon"></img>
                                <p className="weui-tabbar__label">通讯录</p>
                            </a>
                            <a href="javascript:;" className="weui-tabbar__item" data="3">
                                <span style={{display: "inline-block", position: "relative"}}>
                                    <img src="/bower_components/weui-master/example/images/icon_tabbar.png" alt=""
                                         className="weui-tabbar__icon"></img>
                                    <span className="weui-badge weui-badge_dot"
                                          style={{position: "absolute", top: 0, right: "-6px"}}></span>
                                </span>
                                <p className="weui-tabbar__label">发现</p>
                            </a>
                            <a href="javascript:;" className="weui-tabbar__item" data="4">
                                <img src="/bower_components/weui-master/example/images/icon_tabbar.png" alt=""
                                     className="weui-tabbar__icon"></img>
                                <p className="weui-tabbar__label">我</p>
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        );
    }
});